<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/list.css">
    <style>
        .apl {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff; /* 设置背景颜色，如果需要的话 */
            /* 其他样式属性，例如 padding、border 等 */
        }
    </style>
</head>
<body>
<div id="nav" class="w-75 m-auto"></div>
<div class="container-fluid w-75 m-auto" id="albumDetailApp" style="height: 150vh">
    <div class="media mt-5">
        <img :src="'/music_platform'+playList.pic" class="mr-3" alt="..." style="width: 250px;height: 250px;border:solid #0f0f0f;">
        <div class="media-body">
            <h4 class="mt-0">{{playList.plname}}</h4>
            <div v-if="isCurrentUser===false" class="float-right">
                <a :href="'/music_platform/pages/create_playList.html?plid='+playList.plid"><i class="fa-solid fa-pen-to-square" style="color: #0b44a8;"></i></a>
            </div>
            <div class="btn-group" role="group">
                <span v-if="playList.favoriteStatus===0"><button :disabled="isCurrentUser===false" class="btn btn-danger btn-sm" @click="collectPlayList">收藏</button></span>
                <span v-else>
                        <template>
                            <el-popconfirm
                                    title="确定取消收藏？"
                                    @confirm="unCollectPlayList"
                            >
                                <el-button slot="reference" size="small">已收藏</el-button>
                            </el-popconfirm>
                        </template>
                    </span>
                <span class="ml-2 mt-1">(已收藏：{{playList.subscription_count}})</span>
                <!--            <button type="button" class="btn btn-danger btn-sm ml-5">播放</button>-->
            </div>
            <p class="mt-5">创建者：{{playList.userInfo.username}}</p>
            <p>时间：{{playList.createTimeStr}}</p>
            <div><span class="ml-2 text-info" v-for="item in playList.categories" class="mt-2">{{item.cname}}</span></div>
        </div>
    </div>
    <div class="col-md-9" style="margin-top: 20px">
        <el-tabs v-model="activeName">
            <el-tab-pane label="歌曲列表" name="first">
                <table class="table">
                    <thead>
                    <td></td>
                    <td><h5>歌曲名</h5></td>
                    <td><h5>歌手</h5></td>
                    <td><h5>专辑</h5></td>
                    </thead>
                    <tr class="border" v-for="(song,index) in songs">
                        <td>{{index+1}}</td>
                        <td><a class="text-decoration-none text-dark small" :href="'/music_platform/pages/song_detail.html?mid='+song.mid">{{song.mname}}</a></td>
                        <td><a class="text-decoration-none text-dark small" :href="'/music_platform/pages/singer_detail.html?sid='+song.singer.sid">{{song.singer.sname}}</a></td>
                        <td><a class="text-decoration-none text-dark small" :href="'/music_platform/pages/album_detail.html?alid='+song.album.alid">{{song.album.aname}}</a></td>
                        <!--                            <td><button type="button" class="btn btn-primary btn-sm">播放</button></td>-->
                        <td>
                            <span v-if="song.favoriteStatus===0">
                                <el-button type="primary" @click="preFavoriteSong(song.mid)" size="small">收藏</el-button>
                            </span>
                            <span v-else>
                                <el-button slot="reference" size="small" @click="unfavorite">已收藏</el-button>
                            </span>
                            <span>
                                <el-button @click="playSong(song.mid)" type="warning" size="small">播放</el-button>
                            </span>
                            <span>
                                    <a :href="'/music_platform/download?id='+song.mid" class="song-info">
                                        <i class="fas fa-download"></i>
                                    </a>
                                </span>
                        </td>
                    </tr>
                </table>
            </el-tab-pane>
            <el-tab-pane label="歌单简介" name="second">
                <div>
                    <p>&emsp;&emsp;{{playList.desc}}</p>
                </div>
            </el-tab-pane>
            <el-tab-pane label="收藏者" name="third">
                <div class="row" v-for="user in playList.favorUsers">
                    <div class="col-md-3 mt-2 ml-5" style="width: 10rem;height: 50px;background-color: #c5dee8">
                        <span class="justify-content-center">
                            <span>
                                <i class="fa-solid fa-user" style="color: #88a9e2;"></i>
                            </span>
                            <span class="ml-3">
                                {{user.username}}
                            </span>
                        </span>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="收藏"
                   :visible.sync="dialogFormVisible"
                   width="50%">
            <template>
                <el-tabs v-model="activeName2">
                    <el-tab-pane label="选择歌单" name="first">
                        <el-select v-model="playListChosed" filterable placeholder="请选择">
                            <el-option
                                    v-for="(item,index) in userPlayList"
                                    :key="index"
                                    :label="item.plname"
                                    :value="item.plid">
                            </el-option>
                        </el-select>
                        <el-button key="btn1" size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button key="btn2" type="primary"  size="small" @click="addFavorite">确 认</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="创建新歌单" name="second">
                        <el-input placeholder="请输入歌单名" v-model="UserCreatePlayListName"></el-input>
                        <el-button key="btn3" size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button v-if="UserCreatePlayListName!==''" key="btn4" type="primary"  size="small" @click="addFavoriteToNew">确 认</el-button>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-dialog>
    </div>
    <div class="apl">
        <aplayer autoplay
                 :music="{
                title: this.audio.title,
                artist: this.audio.artist,
                src: this.audio.src,
                pic: this.audio.pic,
                lrc: this.audio.lrc
            }" :float="true" :showLrc="true" :mutex="true" :listMaxHeight="'70px'":listFolded="true"
                 :list=this.list     />
    </div>

    <button @click="togglePlaylist" class="list-toggle-button">播放列表</button>
    <div @mouseleave="listOut" class="list-playlist-container" :class="{ 'show-playlist': isPlaylistOpen }">
        <!-- 清空按钮 -->
        <button @click="clearPlaylist" class="clear-playlist-button">一键清空</button>

        <!-- 播放列表信息 -->
        <div class="playlist-info">
            <p>播放列表信息:</p>
            <p>歌曲数量: {{ list.length }}</p>
            <!-- 可以添加其他相关信息 -->
        </div>
        <!-- 歌曲列表 -->
        <div class="list-song-list">
            <!-- 歌曲条目 -->
            <div v-for="(song,index) in list" :key="song.id" class="list-song-item">
                <div class="list-song-info">
                    <strong class="song-info">{{ index + 1 }}. {{ song.title }} - {{ song.artist }}</strong>
                </div>
                <div class="list-delete-button" @click="removeSong(song.id)">删除</div>
            </div>
        </div>
    </div>
</div>


<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/newnav.js"></script>
<script src="js/vue.js"></script>
<!-- 引入 Vue-APlayer -->
<script src="js/vue-aplayer.min.js"></script>
<script src="js/axios.js"></script>
<script src="js/getParameter.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let albumDetailApp = new Vue({
        el:"#albumDetailApp",
        data:{
            activeName: 'first',
            activeName2: 'first',
            playList:{
                userInfo:{
                    username:'',
                }
            },
            songs:[],
            dialogFormVisible:false,
            UserCreatePlayListName:'',
            playListChosed:'',
            userPlayList:[-1],
            songSelectedSid:'',
            collectNum:'',
            pageNum:1,
            isCurrentUser:true,
            audio: {
                title:'无歌曲',
                artist: '无歌曲',
                src: '',
                pic: '/music_platform/img/R-C.png',
                lrc:''
            },
            list:[],
            isPlaylistOpen: false,
        },
        methods:{
            async playSong(mid){
                let _this = this;
                await axios.get("/music_platform/singleSong/"+mid).then(function (response){
                    _this.audio.title = response.data.data.mname;
                    _this.audio.artist = response.data.data.singer.sname;
                    _this.audio.pic = "/music_platform"+response.data.data.pic;
                    _this.audio.lrc = response.data.data.lyc;
                    _this.audio.src = "/music_platform"+response.data.data.source;
                })
                this.addAudio();
            },
            loadPlayListDetail:function (){
                let plid = getParameter("plid");
                let _this = this;
                axios.get("/music_platform/playlist/playListDetail",{
                    params:{
                        plid:plid,
                    }
                }).then(function (response){
                    _this.playList = response.data.data;
                    _this.songs = response.data.data.songs;
                    _this.isCurrentUser = response.data.flag;
                })
            },
            loadUserHasPlayList:function (){
                let _this = this;
                axios.get("/music_platform/playlist/findByUid").then(function (response){
                    if (response.data.flag == true){
                        _this.userPlayList = response.data.data;
                    }
                })
            },
            unfavorite:function (val){
                let _this = this;
                axios.get("/music_platform/playlist/unFavorite",{
                    params:{
                        mid:val
                    }
                }).then(function (response){
                    _this.loadPlayListDetail();
                })
            },
            addFavorite:function (){
                let _this = this;
                axios.get("/music_platform/playlist/addFavorite",{
                    params:{
                        mid:_this.songSelectedSid,
                        plid:_this.playListChosed
                    }
                }).then(function (response){
                    _this.loadPlayListDetail();
                    _this.dialogFormVisible=false;
                })
            },
            addFavoriteToNew:function (){
                let _this = this;
                axios.get("/music_platform/playlist/addFavoriteToNew",{
                    params:{
                        mid:_this.songSelectedSid,
                        plname:_this.UserCreatePlayListName
                    }
                }).then(function (response){
                    _this.loadPlayListDetail();
                    _this.loadUserHasPlayList();
                    _this.dialogFormVisible=false;
                })
            },
            collectPlayList:function (){
                let _this = this;
                let plid = getParameter("plid");
                axios.get("/music_platform/playlist/addFavoritePlayList",{
                    params:{
                        plid:plid
                    }
                }).then(function (response){
                    if (response.data.flag===false){
                        location.href = "/music_platform/pages/login.html"
                    }else {
                        _this.loadPlayListDetail();
                    }
                })
            },
            unCollectPlayList:function (){
                let _this = this;
                let plid = getParameter("plid");
                axios.get("/music_platform/playlist/removeFavoritePlayList",{
                    params:{
                        plid:plid
                    }
                }).then(function (response){
                    _this.loadPlayListDetail();
                })
            },
            preFavoriteSong:function (val){
                if (this.userPlayList[0]===-1){
                    location.href = "/music_platform/pages/login.html"
                }else {
                    this.dialogFormVisible = true;
                    this.songSelectedSid=val
                }
            },
            addAudio(){
                if (!this.list.some(item => item.title === this.audio.title &&
                    item.artist === this.audio.artist)){
                    const audioCopy = { ...this.audio };
                    this.list.push(audioCopy);
                    // 更新数据后将数据保存到localStorage
                    localStorage.setItem('myList', JSON.stringify(this.list));
                }
            },
            removeSong(index) {
                // 在这里实现删除歌曲的逻辑
                this.list.splice(index, 1);
                localStorage.setItem('myList', JSON.stringify(this.list));
            },
            togglePlaylist() {
                this.isPlaylistOpen = !this.isPlaylistOpen;
            },
            listOut(){
                this.isPlaylistOpen = false;
            },
            clearPlaylist(){
                this.list = []
            }
        },
        created:function (){
            this.loadPlayListDetail();
            this.loadUserHasPlayList();
        },
        components: {
            Aplayer: window.VueAPlayer  // 注册Vue-APlayer组件
        },
        mounted:function (){
            // 在Vue实例初始化后，尝试从localStorage获取数据
            var storedList = localStorage.getItem('myList');
            if (storedList) {
                // 如果本地存储中有数据，将其解析并赋值给Vue的数据
                this.list = JSON.parse(storedList);
            }
        },
        beforeDestroy() {
            localStorage.setItem('myList', JSON.stringify(this.list));
        }
    })
</script>
</body>
</html>